<template>
    <div class="shopCartContainer">
        <!-- 购物列表 -->
       <div class="shopCarList">
           <div class="mui-card">
               <div class="mui-card-content" v-for="item in shopCarList" :key="item.id">

                   <div class="left">
                       <mt-switch
                           v-model="$store.getters.isSelected[item.id]"
                           @change="changeSwitch(item.id, $store.getters.isSelected[item.id])"
                       ></mt-switch>
                       <img :src="item.thumb_path">
                   </div>
                   <div class="right">
                       <h1>{{ item.title }}</h1>
                       <p>
                           <b>￥{{ item.sell_price }}</b>
                           <num-btn
                               :max="88"
                               :val="$store.getters.getGoodsCount[item.id]"
                               :id="item.id"
                           >
                           </num-btn>
                           <a @click.prevent="remove(item.id)">删除</a>
                       </p>
                   </div>
               </div>
           </div>

       </div>
        <!-- 结算清单 -->
        <div class="listing">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选 <b>{{ listingMoney.count }}</b>件，
                            总价 <b>￥{{ listingMoney.money }}</b> </p>
                    </div>
                    <div class="right">
                        <mt-button type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入 NumBtn 组件
    import numBtn from '../subComment/shopCarNumBtn.vue'

    // 引入 mui
    import mui from '../../lib/mui/js/mui.min.js'
    export default {
        data() {
            return {
                shopCarList: [],
                cars: JSON.parse(window.localStorage.getItem('car')),
                listingMoney: this.$store.getters.listingMoney
            }
        },
        components: {
            numBtn
        },
        mounted() {
            this.getShopCarList()
        },
        methods: {
            // 获取购物车列表
            getShopCarList () {
                var ids = []
                this.cars.forEach(item => {
                    ids.push(item.id)
                })
                if (ids.length <= 0 ) return
                this.$http.get('api/goods/getshopcarlist/' + ids.join(','))
                    .then(function (data) {
                        var data = data.body
                        if (data.status !== 0) return
                        console.log(data.message)
                        this.shopCarList = data.message
                    })
            },
            // 改变开关
            changeSwitch(id, flag) {
                console.log(id, flag)
                // 修改 开关
                this.$store.commit('changeSwitch', { id, flag })
            },
            // 删除
            remove(id) {
                // 先删除 本地存储的
                this.$store.commit('removeItemById', id)
                // 删除 列表内
                this.shopCarList.some((item, i) => {
                    if (item.id === id) {
                        this.shopCarList.splice(i, 1)
                        return true
                    }
                })
            }
        },
        watch: {
            '$store.getters.listingMoney': function () {
                this.listingMoney = this.$store.getters.listingMoney
            }
        }
    }
</script>

<style scoped lang="less">
    .shopCartContainer {
        background-color: #eee;
        overflow: hidden;
        .shopCarList {
            .mui-card-content {
                padding: 10px;
                display: flex;
                .left {
                    display:  flex;
                    align-items: center;
                    img {
                        margin-left: 4px;
                        width: 60px;
                        height: 60px;
                    }
                }
                .right {
                    padding: 5px;
                    h1 {
                        font-size: 14px;
                    }
                    p {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                    }
                }


            }
        }
       .listing {
           .mui-card-content {
               p {
                   margin: 10px;
               }
               padding:  0 10px ;
               display: flex;
               justify-content: space-between;
               align-items: center;
           }
       }
        b {
            color : red;
            font-size: 16px;
        }
    }
</style>